import React, { FC, useMemo } from 'react';
import { Table, DataSet } from 'choerodon-ui/pro';
import { FieldType } from 'choerodon-ui/pro/lib/data-set/enum';

const columns = [
  { name: 'id' },
  { name: 'code' },
  { name: 'desc' },
  {
    header: 'Action',
    render: () => <a onClick={() => alert('删除')}>Delete</a>,
  },
];

const NestedTable: FC = () => {
  const ds = useMemo(() => new DataSet({
    name: 'nested-table-ds',
    autoQuery: false,
    fields: [
      { name: 'id', type: FieldType.string, label: 'ID' },
      { name: 'code', type: FieldType.string, label: '编码' },
      { name: 'desc', type: FieldType.string, label: '描述' },
    ],
    data: [
      { id: '1001', code: 'HZERO-A', desc: '描述字段' },
      { id: '1002', code: 'HZERO-B', desc: '描述字段' },
      { id: '1003', code: 'HZERO-C', desc: '描述字段' },
      { id: '1004', code: 'HZERO-D', desc: '描述字段' },
    ],
  }), []);
  return (
    <Table
      dataSet={ds}
      columns={columns}
    />
  );
};

export default NestedTable;
